<!--
 * 用户购买首页
 *
 * @Author: ShanZhu
 * @Date: 2024-01-24
-->
<template>
  <div class="goods-container">
    <!--   操作面板   -->
    <el-card class="filter-card">
      <div>
        <el-input v-model="param.searchKey" style="width: 240px" @keyup.enter.native="refresh(1)"
                  placeholder="内容"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="refresh(1)">搜索</el-button>
      </div>
      <div class="filter-bar">
        <el-select v-model="filterColor" placeholder="颜色" clearable style="width:120px;margin-right:10px">
          <el-option v-for="item in colorOptions" :key="item" :label="item" :value="item"/>
        </el-select>
        <el-select v-model="filterPurpose" placeholder="用途" clearable style="width:120px;margin-right:10px">
          <el-option v-for="item in purposeOptions" :key="item" :label="item" :value="item"/>
        </el-select>
        <el-select v-model="filterCategory" placeholder="种类" clearable style="width:120px;">
          <el-option v-for="item in categoryOptions" :key="item" :label="item" :value="item"/>
        </el-select>
        <el-button type="primary" @click="refresh(1)">筛选</el-button>
      </div>
    </el-card>
    <el-card class="main-card">
      <div class="goods-list">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(o, index) in list" :key="o.id || index">
            <el-card class="goods-item">
              <img :src="o.img_guid" class="goods-img">
              <div class="goods-info">
                <el-tag>{{o.name}}</el-tag>
                <div class="goods-price">
                  <span>价格：</span>
                  <span class="price-value">￥{{o.price}}</span>
                </div>
                <div class="goods-detail">{{o.detail}}</div>
                <div class="buy-amount-bar">
                  <el-input-number v-model="buyAmounts[index]" :min="1" :max="99" size="mini" style="width:100px;margin:0 5px" />
                </div>
                <div class="bottom clearfix">
                  <el-button class="button-add-cart" icon="el-icon-shopping-cart-1" type="success"
                           @click="addCart(o, buyAmounts[index])">加入购物车</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!--   分页  -->
      <div class="pagination-container">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="pagination.total"
          :page-size="pagination.pageSize"
          :current-page="pagination.currentPage"
          @current-change="pageChange">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        types: [],
        param: {
          page: 1,
          searchKey: '',
          searchType: '',
        },
        addParam: {
          fid: 1,
          flower: '',
          account: window.sessionStorage.getItem("token"),
        },
        list: [],
        pagination: {
          total: 1,
          pageSize: 6, // 每页6个
          currentPage: 1,
        },
        colorOptions: ['红色', '粉色', '黄色', '白色', '紫色', '蓝色'],
        purposeOptions: ['表白', '道歉', '日常', '派对', '感谢'],
        categoryOptions: ['爱情鲜花', '道歉鲜花', '祝贺鲜花', '生日鲜花', '友情鲜花', '感恩鲜花'],
        filterColor: '',
        filterPurpose: '',
        filterCategory: '',
        buyAmounts: [], // 新增：每个商品的购买数量
      }
    },
    methods: {

      pageChange(page) {
        this.refresh(page);
      },
      addCart(flower, amount) {
        this.addParam.fid = flower.id;
        this.addParam.flower = flower.name;
        this.addParam.amount = amount || 1;
        console.log(this.addParam)
        this.$http.post("/cart/create", this.addParam).then(result => {
          let R = result.data; // R
          if (R.code === 2000) {
            this.$message.success(R.msg);
            // 重置数量为1
            const idx = this.list.findIndex(item => item.id === flower.id);
            if (idx !== -1) this.$set(this.buyAmounts, idx, 1);
          } else {
            this.$message.error(R.msg);
          }
        });
      },
      refresh(page) {
        if (page === undefined) {
          page = 1;
        }
        let url = `/flower/findAll?page=${page}&searchKey=${this.param.searchKey}`;
        if (this.filterCategory) url += `&category=${this.filterCategory}`;
        if (this.filterColor) url += `&color=${this.filterColor}`;
        if (this.filterPurpose) url += `&purpose=${this.filterPurpose}`;
        this.$http.get(url).then(result => {
          let R = result.data;
          this.list = R.data.items;
          this.pagination.total = R.data.len * this.pagination.pageSize;
          this.pagination.currentPage = page;
        })
      },
    },
    created() {
      this.refresh(1);
    },
    watch: {
      list(newList) {
        // 初始化每个商品的购买数量为1
        this.buyAmounts = newList.map(() => 1);
      }
    }
  }
</script>

<style scoped>
.goods-container {
  height: calc(100vh - 60px);
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}

.filter-card {
  margin-bottom: 20px;
  }

.filter-bar {
  margin: 10px 0;
  }

.main-card {
  background: #fff;
}

.goods-list {
  margin-bottom: 20px;
}

.goods-item {
  margin-bottom: 20px;
  transition: all 0.3s;
  }

.goods-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.goods-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin: 0;
  border-radius: 4px;
}

.goods-info {
  padding: 14px;
  }

.goods-price {
  margin: 15px 0;
  font-size: 20px;
}

.price-value {
  color: #ff6a00;
  }

.goods-detail {
  color: #666;
  margin-bottom: 15px;
  min-height: 40px;
  }

  .button-add-cart {
  width: 100%;
  margin: 0;
}

.buy-amount-bar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.pagination-container {
  text-align: center;
  margin-top: 20px;
  padding-bottom: 20px;
}

/* 删除不需要的样式 */
.search-input,
.updateForm,
.btn-release,
.form-releaseTask,
.input-content-task {
  display: none;
  }
</style>
